<template>
  <div class="app-container">
    <el-steps :active="0" finish-status="success" simple style="margin-top: 20px">
      <el-step title="课程基本信息" ></el-step>
      <el-step title="课程章节小节" ></el-step>
      <el-step title="最终发布" ></el-step>
    </el-steps>
    <el-form ref="form" :model="course" label-width="80px" style="margin-top: 30px">
      <el-form-item label="课程讲师">
      <el-select v-model="course.teacherId" placeholder="请选择讲师">
        <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name" :value="teacher.id"/>
      </el-select>
    </el-form-item>

      <el-form-item label="课程分类">
        <el-select v-model="course.subjectParentId" placeholder="一级分类" @change="changeOneSubject">
          <el-option v-for="oneSubject in oneSubjectList" :key="oneSubject.id" :label="oneSubject.title" :value="oneSubject.id"></el-option>
        </el-select>
        <el-select v-model="course.subjectId" placeholder="二级分类" style="margin-left: 20px">
          <el-option v-for="twoSubject in twoSubjectList" :key="twoSubject.id" :label="twoSubject.title" :value="twoSubject.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="课程标题">
        <el-input v-model="course.title"></el-input>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number v-model="course.price" :min="0"  label="课程价格"></el-input-number>
      </el-form-item>


      <el-form-item label="课程简介">
        <el-card style="height: 410px;">
          <quill-editor v-model="course.description" ref="myQuillEditor" style="height: 300px;" :options="editorOption">
          </quill-editor>
        </el-card>
      </el-form-item>

      <el-form-item label="课程封面">
        <el-upload
          class="avatar-uploader"
          :action="BASE_API+'/oss'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="course.cover" :src="course.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

    </el-form>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>

</template>

<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  import teacher from '@/api/teacher'
  import subject from '@/api/subject'
  import course from '@/api/course'

    export default {
      components: {
        quillEditor
      },
        name: "info",
      data() {
        return {
          course:{//添加的课程对象
            price:0.01,//课程价格默 认值
            cover:'https://zjx-2020.oss-cn-beijing.aliyuncs.com/2020/12/07/cae2ff199bcd4d30a2535779d32172f502.jpg',//课程封面
            teacherId:'',//讲师id
            subjectId:'',//二级分类id
            subjectParentId:'',//一级分类id
            title:'',//课程标题
            description:'',//课程简介
          },
          courseId:'',//课程id
          editorOption: {},
          teacherList:[],//讲师列表
          oneSubjectList:[],//一级分类列表
          twoSubjectList:[],//二级分类列表
          BASE_API:process.env.VUE_APP_BASE_API,//ip 端口号请求前缀

        };
      },
      created(){
        //判断路由中是否有课程id，有便是修改操作，回显数据
        if(this.$route.params.id){
          this.courseId = this.$route.params.id
          this.getBaseInfo()

        }


        //讲师数据
        this.getTeacher()
        //获取分类数据
        this.getSubject()



      },
      methods: {
        //添加课程基本信息
        saveCourse(){
          course.addCourse(this.course)
            .then(response=>{
              //提示
              this.$message({
                type: 'success',
                message: '添加课程成功!'
              });
              this.$router.push({path:'/course/chapter/'+response.data.courseId})
            })
        },
        //根据课程id查询课程基本信息
        getBaseInfo(){
          course.getBaseInfo(this.courseId)
            .then(response=>{
              this.course = response.data.course

            })

        },

        //修改课程基本信息
        updateCourse(){
          course.updateCourse(this.course)
            .then(response=>{
              //提示
              this.$message({
                type: 'success',
                message: '修改课程成功!'
              });
              this.$router.push({path:'/course/chapter/'+this.courseId})
            })
        },


        //通过路由是否存在id来执行不同操作
        next() {
          if(this.courseId){//修改
            this.updateCourse()
          }else{//添加
            this.saveCourse()
          }

        },
        //查询所有课程讲师
        getTeacher(){
          teacher.getAllTeacher()
            .then(response=>{
              this.teacherList =response.data.list
            })
        },

        //获取一级分类数据，其中包含二级分类数据
        getSubject(){
          subject.getList()
            .then(response=>{
              this.oneSubjectList = response.data.list
            })
        },

        //当一级分类数据改变，二级分类数据也要改变
        changeOneSubject(){
          //清空课程二级分类id
          this.course.subjectId = ''
          //遍历所有一级分类数据， 对比当前课程的一级分类id，相同将这个一级分类的二级分类列表赋值给vue对象的二级分类列表
          for(var i=0;i<this.oneSubjectList.length;i++){
            if(this.oneSubjectList[i].id == this.course.subjectParentId){
              this.twoSubjectList = this.oneSubjectList[i].children
            }
          }

        },






        //上传成功
        handleAvatarSuccess(res, file) {

          this.course.cover = res.data.url
        },
        //上传之前
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
      },


      updated() {
        //获取当前所有二级分类
        for(var i=0;i<this.oneSubjectList.length;i++){
          if(this.oneSubjectList[i].id == this.course.subjectParentId){
            this.twoSubjectList = this.oneSubjectList[i].children
          }
        }
      }


    }
</script>

<style >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
